<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="40%">
    <el-form
      class="demo-ruleForm"
      :model="form"
      label-width="100px"
      ref="ruleForm"
      :rules="rules"
      status-icon
    >
      <el-form-item label="用户名" prop="userName">
        <el-input placeholder="请输入用户名" v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          placeholder="请输入密码"
          v-model="form.password"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="系统" v-if="title == '新增'">
        <el-radio v-model="form.website" label="ECP" border>ECP</el-radio>
        <el-radio v-model="form.website" label="ERP" border>ERP</el-radio>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button class="globalBtn" @click="addItem">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addEcp, addErp, editEcp, editErp } from "@/common/api";
export default {
  name: "AccountEdit",
  props: {},
  data() {
    return {
      title: "",
      dialogFormVisible: false,
      form: {
        userName: "",
        password: "",
        website: "ECP",
        id: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  mounted() {},
  methods: {
    addItem() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.title == "新增") {
            if (this.form.website == "ECP") {
              this.addEcp();
            } else {
              this.addErp();
            }
          } else {
            //编辑
            if (this.form.website == "ECP") {
              this.editEcp();
            } else {
              this.editErp();
            }
          }
        } else {
          return false;
        }
      });
    },
    addEcp() {
      let params = {
        userName: this.form.userName,
        password: this.form.password,
      };
      addEcp(params)
        .then((res) => {
          if (res.success == 1) {
            this.$successMsg("添加成功");
            this.dialogFormVisible = false;
            this.$emit("freshData");
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch((err) => {
          this.$errorMsg("接口异常");
        });
    },
    addErp() {
      let params = {
        userName: this.form.userName,
        password: this.form.password,
      };
      addErp(params)
        .then((res) => {
          if (res.success == 1) {
            this.$successMsg("添加成功");
            this.dialogFormVisible = false;
            this.$emit("freshData");
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch((err) => {
          this.$errorMsg("接口异常");
        });
    },
    editEcp() {
      let params = {
        userName: this.form.userName,
        password: this.form.password,
        id: this.form.id,
      };
      editEcp(params)
        .then((res) => {
          if (res.success == 1) {
            this.$successMsg("修改成功");
            this.dialogFormVisible = false;
            this.$emit("freshData");
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch((err) => {
          this.$errorMsg("接口异常");
        });
    },
    editErp() {
      let params = {
        userName: this.form.userName,
        password: this.form.password,
        id: this.form.id,
      };
      editErp(params)
        .then((res) => {
          if (res.success == 1) {
            this.$successMsg("修改成功");
            this.dialogFormVisible = false;
            this.$emit("freshData");
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch((err) => {
          this.$errorMsg("接口异常");
        });
    },
  },
};
</script>


<style scoped>
::v-deep .el-radio.is-bordered.is-checked {
  border-color: #249087;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #249087;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #249087;
}
.el-radio input[aria-hidden="true"] {
  display: none !important;
}

.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none !important;
}
</style>
